<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- 标签类型 -->
    <title>天琴座-day13 前端基础</title>
    <style>
      body{
        margin: 0;  
      }
      #note-menu{
        width: 20%;
        height: 100%;
        background-color: rgb(44, 174, 250);
        float: left;
        /* display: inline-block; */
        position: fixed;
      }
      #note-content{
        /* top: 60px; */
        width: 80%;
        height: 2500px;
        right: 0px;
        background-color:rgb(168, 166, 166);
        float: right;
        /* display: inline-block; */
        position: relative;
      }
      #note-desc{
        padding: 10px
      }
      .note-desc-chapter{
        padding: 10px;
        background-color: white;
        border-style: double;
      }
      dl{
        position: relative;
        padding-left: 100px;
        top: 30px;
      }
      dd{
        margin-top: 15px;
      }
      .show{
        display: block
      }
    </style>
  </head>
  <body>
    <div class="note-body" >

      <div id="note-menu">
        <dl id="note-html" >
          <dt id="note-html-dt">html</dt>
          <dd class="note-html-dd">html标签</dd>
          <dd class="note-html-dd">style标签</dd>
          <dd class="note-html-dd">script标签</dd>
          <dd class="note-html-dd">h1标签</dd>
          <dd class="note-html-dd">div标签</dd>
          <dd class="note-html-dd">span/p标签</dd>
          <dd class="note-html-dd">input标签</dd>
          <dd class="note-html-dd">form标签</dd>
          <dd class="note-html-dd">label</dd>
          <dd class="note-html-dd">textarea标签</dd>
          <dd class="note-html-dd">select标签</dd>
          <dd class="note-html-dd">ul标签</dd>
          <dd class="note-html-dd">ol标签</dd>
          <dd class="note-html-dd">dl标签</dd>
          <dd class="note-html-dd">table标签</dd>
        </dl>
        <dl id="note-css">
          <dt>
            css 
          </dt>
        </dl>
        <dl id="note-html">
          <dt>
            js 
          </dt>
        </dl>
      </div>
      <div id="note-content">
        <div id="note-desc">
          <h1>Html常用标签</h1>
          <div class="note-desc-chapter">
            <span>
              <p>什么是 HTML？</p>
              <br>
              HTML 是用来描述网页的一种语言。<br>
              HTML 指的是超文本标记语言 (Hyper Text Markup Language)<br>
              HTML 不是一种编程语言，而是一种标记语言 (markup language)<br>
              标记语言是一套标记标签 (markup tag)<br>
              HTML 使用标记标签来描述网页
            </span>
            <p>
              <ul>
                <li>html标签之间的文本描述网页</li>
                <li>head标签之间的文本是不可见的页面内容</li>
                <li>body标签之间的文本是可见的页面内容</li>
              </ul>
            </p>
            <p>
              head标签中通常包含以下几个标签：
              <ul>
                <li>title</li>
                <li>meta</li>
                <li>style</li>
                <li>link</li>
              </ul>
            </p>
          </div>
          <div class="note-desc-chapter">
            <p>
              style标签
            </p>
            <span>
              在说style标签之前需要先来了解一下style属性的作用<br>
              <p><b>&nbsp;&nbsp;style提供了一种改变所有 HTML 元素的样式的通用方法。</b></p>
              样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
            </span>
            <span>后面我们在讲解css样式的时候会专项来针对这个来进行讲解</span>
          </div>
          <div class="note-desc-chapter">
            <p>
              script标签
            </p>
            <span>
              在script标签中放置的就是我们尝尝会听说的JavaScript，JavaScript使HTML页面具有更强的动态和交互性。
            </span>      
            <p>下面的脚本会向浏览器输出“Hello World!”</p>
            <pre>
              &lt;script type="text/javascript"&gt;
                document.write("Hello World!")
              &lt;/script&gt;
            </pre> 
          </div>
          <div class="note-desc-chapter">
            <p>h1标签</p>
            标题是通过h1 -- h6 标签进行定义的
            <pre>
  &lt;h1&gt;
    h1的标题
  &lt;/h1&gt;
            </pre>
            <h1> 这个是h1的标题。</h1>
            <h2> 这个是h2的标题</h2>
            <h3> 这个是h3的标题</h3>
            <h4> 这个是h4的标题</h4>
            <h5> 这个是h5的标题</h5>
            <h6> 这个是h6的标题。</h6>
          </div>
          <div class="note-desc-chapter">
            <p>div标签</p>
            <span>div标签是一个白板标签，它在页面上不会展示出任何内容</span>
            <span>通常我们使用 div标签配合css样式来做页面的排版布局</span>
          </div>
          <div class="note-desc-chapter">
              <p>span/p标签</p>
              <span>日常中最常用的文本标签</span>
              <span>p标签是一个块级标签，span标签是一个行内标签</span>
          </div>
          <div class="note-desc-chapter">
              <p>input标签</p>
              <span>input是最重要的表单元素。</span>
              <span>input有很多形态，根据不同的type属性来改变。</span>
              <p><b>type="text"</b></p>
              <input type="text" placeholder="请输入用户名。。" />
              <p>如果需要在输入框中显示一些提示内容时，使用placeholder属性</p>
              <p>value属性则对应着input输入的内容，如下所示</p>
              <input type="text" placeholder="请输入用户名。。" value="text中的内容 "/>
              <p><b>type="password"</b></p>
              <span>password会让input按照密码的格式进行处理，用星号隐藏输入内容</span>
              <p><input type="password" /></p>
              <p><b>type="button"</b></p>
              <span>button是一个单纯的按钮，点击不会触发任何操作，需要通过js来绑定一些操作</span>
              <p><input type="button" value="点我点我"/></p>
              <p><b>type="submit"</b></p>
              <span>定义用于向表单处理程序（form-handler）提交表单的按钮。</span><br>
              <span>表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。</span>
<pre>
    &lt;form action="action_page.php"&gt;
    First name:&lt;br&gt;
    &lt;input type="text" name="firstname" value="Mickey"&gt;
    &lt;br&gt;
    Last name:&lt;br&gt;
    &lt;input type="text" name="lastname" value="Mouse"&gt;
    &lt;br&gt;&lt;br&gt;
    &lt;input type="submit" value="Submit"&gt;
    &lt;/form&gt;     
</pre>
              <input type="submit" value="submit"/>
              <p><b>type="radio单选按钮"</b></p>
              <p>定义单选按钮。</p>
              <p>单选按钮允许用户在有限数量的选项中选择其中之一</p>
              <input type="radio" name="sex" value="man"/> 男
              <input type="radio" name="sex" value="woman" /> 女
<pre>&lt;form&gt;
  &lt;input type="radio" name="sex" value="male" checked&gt;Male
  &lt;br&gt;
  &lt;input type="radio" name="sex" value="female"&gt;Female
  &lt;/form&gt; 
</pre>
              <p>如果需要一个默认选中，则需要添加checked的属性</p>
              <p><b>type="checkbox多选按钮"</b></p>
              <p>定义多选按钮</p>
              <input  type="checkbox" name="course"/> 计算机
              <input  type="checkbox" name="course"/> 英语
              <input  type="checkbox" name="course" checked="checked"/> 数学
              <p>如果需要一个默认选中，则需要添加checked的属性</p>

              <p><b>type="rest重置按钮"</b></p>
              <p>如果需要重置一个form表单中的数据，则需要一个rest重置按钮</p>
              <input type="rest" value="重置">
          </div>
          <div class="note-desc-chapter">
            <p>form表单</p>
            <span>HTML 表单用于收集用户输入。 元素定义 HTML 表单：</span>
          </div>
        </div>
      </div>
    <!-- </div> -->

    <script>
      html_dt  = document.getElementById("note-html-dt").addEventListener("click",show);
      function show(){
        console.log(this);
        console.log(this.next)
      }

    </script>
  </body>
  
</html>